"use client"

import React from 'react';
import Image from 'next/image';
import type { PlayerCategory } from "@/lib/types";

/**
 * 获取游戏模式对应的图标组件
 * @param category 游戏模式分类
 * @param size 图标大小，默认为24px
 * @returns 对应的图标组件
 */
export function ModeIcon({ 
  category, 
  size = 24,
  className = "" 
}: { 
  category: PlayerCategory, 
  size?: number,
  className?: string
}) {
  // 根据类别获取对应的SVG路径
  const getIconPath = (): string => {
    switch(category) {
      case 'combat':
        return '/lovesong/sword.svg';
      case 'crystal':
        return '/lovesong/CRYSTAL.svg';
      case 'heart':
        return '/lovesong/buhc.svg';
      case 'potion':
        return '/lovesong/POTION.svg';
      case 'discord':
        return '/lovesong/NPOT.svg';
      case 'circle':
        return '/lovesong/smp.svg';
      case 'overall':
        return '/lovesong/sword.svg'; // 总排行榜默认使用剑图标
      case 'sword':
        return '/lovesong/sword.svg';
      case 'axe':
        return '/lovesong/axe.svg';
      default:
        return '/lovesong/sword.svg';
    }
  };

  return (
    <div className={`relative inline-block ${className}`} style={{ width: size, height: size }}>
      <Image
        src={getIconPath()}
        alt={`${category} icon`}
        width={size}
        height={size}
        className="object-contain"
      />
    </div>
  );
}

export default ModeIcon; 